<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度换肤案例</title>
		<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		#app{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image:url(../images/con1.jpg);
			background-position: center 0; 
			background-size:cover ;
		}
		
			#photo{
				width: 100%;
				height: 200px;
				position: relative;
				z-index: 10;
				
			}
			
			img{
				padding-left: 84px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="ap">
			<button type="button" id="btn">换肤</button>
			<button type="button" id="yc">隐藏</button>
			<div id="photo">
				<img src="../images/con1.jpg" id="img1">
				<img src="../images/con2.jpg" id="img2" >
				<img src="../images/con3.jpg" id="img3">
				<img src="../images/con4.jpg" id="img4">
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var app = document.getElementById('app');
				var img1= document.getElementById('img1');
				var img2= document.getElementById('img2');
				var img3= document.getElementById('img3');
				var img4= document.getElementById('img4');
				var btn= document.getElementById('btn');
				
				var yc= document.getElementById('yc');
				var photo= document.getElementById('photo');
				var img = document.getElementsByTagName('img');
				var imges = ['url(../images/con1.jpg)','url(../images/con2.jpg)','url(../images/con3.jpg)','url(../images/con4.jpg)'];
				
				btn.addEventListener('click',function(){
					photo.style.display = 'block';
				});
				yc.addEventListener('click',function(){
					photo.style.display = 'none';
				});
				/* for(var i = 0 ;i<img.length;i++){
					img[i].index = i+1;
					img[i].onclick = function(){
						app.style.backgroundImage ='url(../images/con${this.index}.jpg)';
					}
				} */
				
					img1.onclick = function(){
						
							app.style.backgroundImage =imges[0];
						
						
					}
					img2.onclick = function(){
						
							app.style.backgroundImage =imges[1];
						
						
					}
					img3.onclick = function(){
						
							app.style.backgroundImage =imges[2];
						
						
					}
					img4.onclick = function(){
						
							app.style.backgroundImage =imges[3];
						
						
					}
					
				
			}
		</script>
	</body>
</html>
